<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS 演示代码</title>
    <style>
* {
    padding: 0;
    margin: 0;
}
 
a {
    text-decoration: none;
    color: black;
}
 
a:hover {
    color: red;
}
 
div.wrap {
    width: 800px;
    margin: auto;
}
 
table {
    width: 700px;
    border: 1px solid black;
    border-collapse: collapse;
}
 
th {
    background-color: orange;
}
 
td,th {
    border: 1px solid black;
    text-align: center;
}
 
table input[type=text] {
    width: 100px;
}
    </style>
    <script>
        var yugi = {
            col: 5,
            addRow: function(table) {
                var vals = [a.value, b.value, c.value, d.value, "<a href='###' onclick='yugi.modify(table,this)'>加入我的同城，你想添加什么</a> <a href='###' onclick='yugi.del(table,this)'>删除</a>"];
                var tr = table.insertRow(table.tBodies[0].rows.length);
                for (var i = 0; i < yugi.col; i++) {
                    var td = tr.insertCell(tr.cells.length);
                    td.innerHTML = vals[i];
                }
            },
            modify: function(table, row) {
                var r = row.parentElement.parentElement,
                    c = r.cells;
                if (/.*修改.*/g.test(row.innerHTML)) {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        var txt = document.createElement("input");
                        txt.type = "text";
                        txt.value = ci.innerHTML;
                        ci.innerHTML = "";
                        ci.appendChild(txt);
                    }
                    row.innerHTML = "保存";
                } else {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        ci.innerHTML = ci.children[0].value;
                    }
                    row.innerHTML = "修改";
                }
            },
            del: function(table, row) {
                var ind = row.parentElement.parentElement.rowIndex;
                table.tBodies[0].deleteRow(ind);
            }
        }
    </script>
</head>
<body>
    <div class="wrap">
        <div>
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="button" value="添加" onclick="yugi.addRow(table)" />
        </div>
        <table id="table">
            <tr>
                <th>管理人员</th>
                <th>申请人</th>
                <th>商品型号</th>
                <th>商品数量数量</th>
                <th>管理概述</th>
            </tr>
        </table>
    </div>
</body>
</html>